<template>
  <div class="wrap">
    <div class="themain" style="margin-bottom: 45px;">
      <!--您现在的位置-->
      <div>
        <h3 class="whead">
          <span></span>您现在的位置 ：
          <i>市网监测</i>
        </h3>
      </div>
      <div class="box1">
        <p id="select">
          <span class="active">各省区市</span>
        </p>
        <ul class="part1">
          <li v-for="item in allpro" :key="item.id" :class="item.cityName == proname ? 'ssColor':''"
              @click="changePro(item.cityName, item.cityId)">{{item.cityName}}
          </li>
        </ul>
      </div>
      <div class="box1">
        <p id="select2">
          <span class="active">城市</span>
        </p>
        <!--市-->
        <ul class="part3">
          <li class="dqssq" v-for="item in allcity" :key="item.id" :class="item.cityName == cityname ? 'ssColor':''" @click="changeCity(item.cityName)">{{item.cityName}}</li>
        </ul>
      </div>
      <div class="ech clearfix">
        <div id="op_echart"
             style="width: 1200px; height: 600px; -webkit-tap-highlight-color: transparent; user-select: none; position: relative;"
             _echarts_instance_="ec_1525944691767">
          <div style="position: relative; overflow: hidden; width: 1200px; height: 600px; padding: 0px; margin: 0px; border-width: 0px;">
            <canvas data-zr-dom-id="zr_0" width="1200" height="600" style="position: absolute; left: 0px; top: 0px; width: 1200px; height: 600px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas>
          </div>
        </div>
      </div>
      <div class="box2 clearfix" style="position: relative;">
        <span class="btext" v-if="cityname === ''">{{proname}}</span>
        <span class="btext">{{cityname}}</span>
        <select name="" ref="select_ssq" v-model="nowyear" @change="changeS()">
          <option v-for="item in years" :key="item.id" v-bind:value="item">{{item}}</option>
        </select>
        <ul>
          <li v-for="item in mon" :key="item.id">{{item}}</li>
        </ul>
        <h4 style="position: absolute;top: 100px;left: 35%">各省（直辖市、自治区）信息量统计表</h4>
        <ul id="sbzt">
          <li v-for="item in data" :key="item.id">
            {{item}}
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      mon: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
      nowyear: null,
      allpro: [],
      allcity: [],
      proname: '',
      cityname: '',
      year: '',
      option: null,
      proechat: null,
      data: [],
      data1: [],
      data2: [],
      data3: [],
      years: []
    }
  },
  mounted () {
    this.year = new Date().getFullYear()
    this.nowyear = this.year
    this.initEchart()
    this.years = [this.year, this.year - 1, this.year - 2]
    this.findpro().then((data) => {
      this.proname = data[0].cityName
      this.allpro = data
      this.findCity().then((data) => {
        this.cityname = data[0].cityName || this.proname
        this.allcity = data || []
        this.getdata(this.year)
      })
    })
  },
  methods: {
    // 点击省份
    changePro (pro, id) {
      this.proname = pro
      this.findCity(id).then(data => {
        this.cityname = data[0].cityName || this.proname
        this.allcity = data
        this.getdata(this.year)
      }).catch(data => {
        this.cityname = this.proname
        this.allcity = []
      })
    },
    // 点击省份
    changeCity (cityname) {
      this.cityname = cityname
      this.getdata(this.year)
    },
    changeS () {
      if (this.nowyear === this.year) {
        this.data = this.data1
      } else if (this.nowyear === this.year - 1) {
        this.data = this.data2
      } else {
        this.data = this.data3
      }
    },
    // 初始化echarts
    initEchart () {
      this.proechat = window.echarts.init(document.getElementById('op_echart'))
      this.option = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: []
        },
        toolbox: {
          show: true,
          feature: {
            mark: {
              show: true
            },
            dataView: {
              show: true,
              readOnly: false
            },
            magicType: {
              show: true,
              type: ['line', 'bar', 'stack', 'tiled']
            },
            restore: {
              show: true
            },
            saveAsImage: {
              show: true
            }
          }
        },
        calculable: true,
        xAxis: [{
          type: 'category',
          boundaryGap: false,
          data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
        }],
        yAxis: [{
          type: 'value'
        }],
        series: [{
          name: '2016',
          type: 'line',
          stack: '总量',
          data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
        },
        {
          name: '2017',
          type: 'line',
          stack: '总量',
          data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
        },
        {
          name: '2018',
          type: 'line',
          stack: '总量',
          data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
        }
        ]
      }
      this.option.legend.data = [(this.year - 2).toString(), (this.year - 1).toString(), this.year.toString()]
      this.option.series[0].name = (this.year - 2).toString()
      this.option.series[1].name = (this.year - 1).toString()
      this.option.series[2].name = (this.year).toString()
      this.option.series[0].data = this.data3
      this.option.series[1].data = this.data2
      this.option.series[2].data = this.data1
      this.proechat.setOption(this.option)
    },
    findpro () {
      var self = this
      return new Promise(function (resolve, reject) {
        self.axios.get(self.api + '/monitor/cityController/findsheng.do?cityId=10007').then(function (res) {
          resolve(res.data)
        })
      })
    },
    findCity (id) {
      var self = this
      var grade = id || 11
      return new Promise(function (resolve, reject) {
        self.axios.get(self.api + '/monitor/cityController/findnext.do?grade=' + grade).then(function (res) {
          resolve(res.data)
        }).catch(function (res) {
          resolve(res.data)
        })
      })
    },
    getdata (year) {
      var self = this
      this.axios.post(this.api + '/monitor/dataCleanController/findCityNetDetect.do', this.qs.stringify({type: 1, locName: self.cityname, year: year})).then(function (res) {
        if (res.data.msg === 'success') {
          res.data.data.map(function (item, key) {
            self.$set(self.data1, key, item.count)
            self.data = self.data1
          })
          self.axios.post(self.api + '/monitor/dataCleanController/findCityNetDetect.do', self.qs.stringify({type: 1, locName: self.cityname, year: year - 1})).then(function (res) {
            if (res.data.msg === 'success') {
              res.data.data.map(function (item, key) {
                self.$set(self.data2, key, item.count)
              })
            }
            self.axios.post(self.api + '/monitor/dataCleanController/findCityNetDetect.do', self.qs.stringify({type: 1, locName: self.cityname, year: year - 2})).then(function (res) {
              if (res.data.msg === 'success') {
                res.data.data.map(function (item, key) {
                  self.$set(self.data3, key, item.count)
                })
              }
              self.initEchart()
            })
          })
        }
      })
    }
  }
}
</script>

<style lang="" scoped>
  @import "../css/provincial-monitor.css";
.ssColor{color:#e22323}
.part1{cursor: pointer}
</style>
